import { useDictStore } from '@/store/modules/dictData'
import { usePatrolGroupStore } from '@/store/modules/PlanGroupStore'
import { computed, reactive, h } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { CrudSchema } from '@/hooks/web/useCrudSchemas'
import { useDeptStore } from '@/store/modules/dept'
import { FormSchema } from '@/components/Form'
import DeptApi from '@/api/dept'
import { useEquipStore } from '@/store/modules/equip'
import { ElMessage, ElMessageBox, ElTag } from 'element-plus'
import { useUserStore } from '@/store/modules/user'
import PipnentInfoApi from '@/api/equip/pipnet'
import { BaseButton } from '@/components/Button'
import { facOutLedgerType, ProducerLedgerType } from '@/api/equip/type'
import { createImageViewer } from '@/components/ImageViewer'
const EquipStore = useEquipStore()
const { t } = useI18n()
const DeptStore = useDeptStore()
const userStore = useUserStore()
const GroupStore = usePatrolGroupStore()
const DictStore = useDictStore()
DictStore.setDict('fac_y_or_n') //是否
DictStore.setDict('red_type') //红线字典
DictStore.setDict('fac_dict_type') //设施类型
DictStore.setDict('fac_state') //状态字典
DictStore.setDict('mc_material') //井盖材质字典
if (EquipStore.getProducerLedger.length == 0) {
  EquipStore.setProducerLedger()
} //获取厂商列表
if (EquipStore.getFcaListOut.length == 0) {
  EquipStore.setFcaListOut()
} //获取出厂设施列表
const FcaListOut = computed(() => {
  return EquipStore.getFcaListOut
})
//执行用户列表
const UserList = computed(() => {
  return GroupStore.getUserListAll
})
//厂商列表
const ProducerList = computed(() => {
  return EquipStore.getProducerLedger
})
export function PointHook() {
  if (DeptStore.DeptListTypeDetail.length == 0) {
    DeptStore.setFacilityTypeDetail()
  }

  const crudSchemas = reactive<CrudSchema[]>([
    {
      field: 'selection',
      type: 'selection',
      search: {
        hidden: true
      },
      form: {
        hidden: true
      },
      fixed: 'left'
    },
    {
      field: 'index',
      label: t('tableDemo.index'),
      type: 'index',
      fixed: 'left',
      form: {
        hidden: true
      },
      search: {
        hidden: true
      }
    },
    {
      field: 'facName',
      label: t('设施名称'),
      width: 100,
      form: {
        hidden: true
      },
      detail: {
        hidden: true
      },
      search: {
        hidden: false,
        component: 'Input',
        componentProps: {
          placeholder: '设施名称'
        }
      }
    },
    {
      field: 'facState',
      label: t('设施状态'),
      width: 100,
      formatter: (_: Recordable, __: any, cellValue: string) => {
        return DictStore.$state.fac_state?.map((item) => {
          if (item.dictValue == cellValue) {
            return h(ElTag, { type: item.listClass }, () => item.dictLabel)
          }
        })
      },
      search: {
        hidden: false,
        component: 'Select',
        componentProps: {
          placeholder: '设施状态',
          options: DictStore.$state.fac_state?.map((item) => {
            return {
              label: item.dictLabel,
              value: item.dictValue
            }
          })
        }
      },
      form: {
        hidden: true
      },
      detail: {
        hidden: true
      }
    },

    {
      field: 'facDictType',
      label: t('设施字典类型'),
      width: 150,
      formatter: (_: Recordable, __: any, cellValue: string) => {
        return DictStore.$state.fac_dict_type?.map((item) => {
          if (item.dictValue == cellValue) {
            return item.dictLabel
          }
        })
      },
      search: {
        hidden: false,
        component: 'Select',
        componentProps: {
          placeholder: '设施类型',
          options: DictStore.$state.fac_dict_type?.map((item) => {
            return {
              label: item.dictLabel,
              value: item.dictValue
            }
          })
        }
      },
      form: {
        hidden: true
      },
      detail: {
        hidden: true
      }
    },

    {
      field: 'address',
      label: t('详细地址'),
      width: 150,
      search: {
        hidden: true
      },
      form: {
        hidden: true
      },
      detail: {
        hidden: true
      }
    },
    {
      field: 'faciName',
      label: t('类型'),
      width: 150,
      search: {
        hidden: true
      },
      form: {
        hidden: true
      },
      detail: {
        hidden: true
      }
    },
    {
      field: 'redType',
      label: t('红线'),
      width: 150,
      formatter: (_: Recordable, __: any, cellValue: string) => {
        return DictStore.$state.red_type?.map((item) => {
          if (item.dictValue == cellValue) {
            return item.dictLabel
          }
        })
      },
      form: {
        hidden: true
      },
      detail: {
        hidden: true
      },
      search: {
        hidden: true
      }
    },
    {
      field: 'producerUuid',
      label: t('厂商'),
      width: 150,
      formatter: (_: Recordable, __: any, cellValue: string) => {
        return ProducerList.value.map((item) => {
          if (item.uuid == cellValue) {
            return item.producerName
          }
        })
      },
      search: {
        hidden: true
      },

      detail: {
        hidden: true
      }
    },
    {
      field: 'coId',
      label: t('所属公司'),
      width: 150,
      formatter: (_: Recordable, __: any, cellValue: number) => {
        if (cellValue !== undefined && cellValue) {
          return DeptStore.getDeptName(cellValue)[0]?.deptName
        }
      },
      search: {
        hidden: true
      },
      form: {
        hidden: true
      },
      detail: {
        hidden: true
      }
    },
    {
      field: 'isDeadFac',
      label: t('是否截止点设施'),
      width: 150,
      formatter: (_: Recordable, __: any, cellValue: string) => {
        return DictStore.$state.fac_y_or_n?.map((item) => {
          if (item.dictValue == cellValue) {
            return item.dictLabel
          }
        })
      },
      search: {
        hidden: true
      },
      form: {
        hidden: true
      },
      detail: {
        hidden: true
      }
    },
    {
      field: 'isCoAs',
      label: t('是否公司资产'),
      width: 150,
      formatter: (_: Recordable, __: any, cellValue: string) => {
        return DictStore.$state.fac_y_or_n?.map((item) => {
          if (item.dictValue == cellValue) {
            return item.dictLabel
          }
        })
      },
      form: {
        hidden: true
      },
      detail: {
        hidden: true
      },
      search: {
        hidden: true
      }
    },
    {
      field: 'qrCode',
      label: t('二维码编号'),
      width: 150,
      search: {
        hidden: true
      },
      form: {
        hidden: true
      },
      detail: {
        hidden: true
      }
    },

    {
      field: 'facOutModel',
      label: t('设施型号'),
      width: 150,
      search: {
        hidden: true
      },
      form: {
        hidden: true
      },
      detail: {
        hidden: true
      }
    },
    {
      field: 'userId',
      label: t('责任人'),
      formatter: (_: Recordable, __: any, cellValue: number) => {
        return UserList.value.map((item) => {
          if (item.userId == cellValue) {
            return item.userName
          }
        })
      },
      width: 150,
      search: {
        hidden: true
      },
      form: {
        hidden: true
      },
      detail: {
        hidden: true
      }
    },
    {
      field: 'facOutNo',
      label: t('出厂编号'),
      width: 150,
      search: {
        hidden: true
      },
      form: {
        hidden: true
      },
      detail: {
        hidden: true
      }
    },
    {
      field: 'factoryStation',
      label: t('所属厂站'),
      width: 150,
      search: {
        hidden: true
      },
      form: {
        hidden: true
      },
      detail: {
        hidden: true
      }
    }
  ])
  return { crudSchemas }
}
export function EquipLedgerHooks() {
  const PATH_URL = import.meta.env.VITE_API_PHOTO_PATH
  const Formschema = reactive<FormSchema[]>([
    {
      field: 'field1',
      label: '编码属性',
      component: 'Divider',
      componentProps: {
        contentPosition: 'center'
      }
    },
    {
      field: 'qrCode',
      label: t('二维码编码'),
      component: 'Input',
      colProps: {
        span: 8
      }
    },
    {
      field: 'facilityCode',
      label: t('设施编码'),
      component: 'Input',
      colProps: {
        span: 8
      }
    },
    {
      field: 'field1',
      label: '管理信息',
      component: 'Divider',
      componentProps: {
        contentPosition: 'center'
      }
    },
    {
      field: 'faciId',
      label: t('设施类型'),
      component: 'TreeSelect',
      colProps: {
        span: 8
      },
      componentProps: {
        renderAfterExpand: false,
        showCheckbox: true,
        checkStrictly: true,
        checkOnClickNode: true,
        nodeKey: 'id',
        props: {
          label: 'label',
          children: 'children'
        },
        onCheckChange: (data, checkedStatus) => {
          // data: 变化的节点数据
          // checkedStatus: 包含所有选中状态的完整信息
          if (checkedStatus) {
            EquipStore.setFacilityByFacId(data.id)
          }
        }
      },
      optionApi: () => {
        const res = EquipStore.getFacilityTypeTree
        return res
      }
    },
    {
      field: 'facDictType',
      label: t('设施字典类型'),
      component: 'Select',
      colProps: {
        span: 8
      },
      componentProps: {
        options: DictStore.$state.fac_dict_type?.map((item) => {
          return {
            label: item.dictLabel,
            value: item.dictValue
          }
        })
      }
    },
    {
      field: 'facState',
      label: t('设施状态'),
      component: 'Select',
      colProps: {
        span: 8
      },
      componentProps: {
        options: DictStore.$state.fac_state?.map((item) => {
          return {
            label: item.dictLabel,
            value: item.dictValue
          }
        })
      }
    },
    {
      field: 'facName',
      label: t('设施名称'),
      component: 'Input',
      colProps: {
        span: 8
      }
    },
    {
      field: 'coId',
      label: t('所属公司'),
      component: 'TreeSelect',
      colProps: {
        span: 8
      },
      componentProps: {
        renderAfterExpand: false,
        showCheckbox: true,
        checkStrictly: true,
        checkOnClickNode: true,
        nodeKey: 'id',
        props: {
          label: 'label'
        }
      },
      optionApi: async () => {
        const res = await DeptApi.GetDeptListTree()
        return res.data
      }
    },
    {
      field: 'userId',
      label: t('责任人'),
      component: 'Select',
      colProps: {
        span: 8
      },
      componentProps: {
        options: UserList.value.map((item) => {
          return {
            label: item.userName,
            value: item.userId
          }
        })
      }
    },
    {
      field: 'operationDate',
      label: t('投运日期'),
      component: 'DatePicker',
      colProps: {
        span: 8
      }
    },
    {
      field: 'redType',
      label: t('红线'),
      component: 'Select',
      colProps: {
        span: 8
      },
      componentProps: {
        options: DictStore.$state.red_type?.map((item) => {
          return {
            label: item.dictLabel,
            value: item.dictValue
          }
        })
      }
    },
    {
      field: 'isDeadFac',
      label: t('是否截止点设施'),
      component: 'Select',
      colProps: {
        span: 8
      },
      componentProps: {
        options: DictStore.$state.fac_y_or_n?.map((item) => {
          return {
            label: item.dictLabel,
            value: item.dictValue
          }
        })
      }
    },
    {
      field: 'roadName',
      label: t('所在道路名称'),
      component: 'Input',
      colProps: {
        span: 8
      }
    },
    {
      field: 'esuName',
      label: t('探测单位名称'),
      component: 'Input',
      colProps: {
        span: 8
      }
    },
    {
      field: 'esuDate',
      label: t('探测日期'),
      component: 'DatePicker',
      colProps: {
        span: 8
      }
    },
    {
      field: 'mcMaterial',
      label: t('井盖材质'),
      component: 'Select',
      colProps: {
        span: 8
      },
      componentProps: {
        options: DictStore.$state.mc_material?.map((item) => {
          return {
            label: item.dictLabel,
            value: item.dictValue
          }
        })
      }
    },
    {
      field: 'isUmale',
      label: t('是否城市管理'),
      component: 'Select',
      colProps: {
        span: 8
      },
      componentProps: {
        options: DictStore.$state.fac_y_or_n?.map((item) => {
          return {
            label: item.dictLabel,
            value: item.dictValue
          }
        })
      }
    },
    {
      field: 'pipeDropNo',
      label: t('管点序号'),
      component: 'Input',
      colProps: {
        span: 8
      }
    },
    {
      field: 'isCoAs',
      label: t('是否公司资产'),
      component: 'Select',
      colProps: {
        span: 8
      },
      componentProps: {
        options: DictStore.$state.fac_y_or_n?.map((item) => {
          return {
            label: item.dictLabel,
            value: item.dictValue
          }
        })
      }
    },
    {
      field: 'factoryStation',
      label: t('所属厂站'),
      component: 'Input',
      colProps: {
        span: 8
      }
    },
    {
      field: 'address',
      label: t('地址'),
      component: 'Input',
      colProps: {
        span: 20
      }
    },
    {
      field: 'notes',
      label: t('备注'),
      component: 'Input',
      colProps: {
        span: 20
      }
    },
    {
      field: 'file',
      component: 'Upload',
      label: '附件',
      componentProps: {
        action: '/api/file/upload',
        multiple: true,
        headers: { Authorization: userStore.getToken },
        beforeRemove: (uploadFile: any) => {
          return ElMessageBox.confirm(`确定要移除 ${uploadFile.name} ?`).then(
            () => true,
            () => false
          )
        },
        onPreview: (file: any) => {
          // 判断是否为图片文件
          const isImage =
            file.type?.startsWith('image/') ||
            ['.jpg', '.jpeg', '.png', '.gif'].some((ext) => file.name?.toLowerCase().endsWith(ext))
          if (isImage) {
            // 图片文件 - 使用Element Plus的图片预览组件
            const imageUrl = file.response?.data?.url
              ? `${PATH_URL}${file.response.data.url}`
              : file.url
                ? `${PATH_URL}${file.url}`
                : null
            if (imageUrl) {
              createImageViewer({
                urlList: [imageUrl]
              })
            } else {
              ElMessage.warning('无法获取图片URL')
            }
          } else {
            const fileUrl = file.response?.data?.url
              ? `${PATH_URL}${file.response.data.url}`
              : file.url
                ? `${PATH_URL}${file.url}`
                : null

            if (fileUrl) {
              window.location.href = fileUrl
            } else {
              ElMessage.warning('无法获取文件URL')
            }
          }
        },
        onSuccess: (file: any) => {
          return file.data
        },
        slots: {
          default: () => <BaseButton type="primary">上传</BaseButton>
        }
      },
      colProps: {
        span: 20
      }
    },
    {
      field: 'field1',
      label: '出厂属性',
      component: 'Divider',
      componentProps: {
        contentPosition: 'center'
      }
    },
    {
      field: 'facOutUuid',
      label: t('设施出厂台账'),
      component: 'Select',
      componentProps: {
        options: FcaListOut.value.map((item: facOutLedgerType) => {
          return {
            label: item.goodsName,
            value: item.uuid
          }
        })
      },
      colProps: {
        span: 8
      }
    },
    {
      field: 'facOutModel',
      label: t('设施出厂型号'),
      component: 'Input',
      colProps: {
        span: 8
      }
    },
    {
      field: 'facOutNo',
      label: t('出厂编号'),
      component: 'Input',
      colProps: {
        span: 8
      }
    },
    {
      field: 'producerUuid',
      label: t('生产商'),
      component: 'Select',
      componentProps: {
        options: ProducerList.value.map((item: ProducerLedgerType) => {
          return {
            label: item.producerName,
            value: item.uuid
          }
        })
      },
      colProps: {
        span: 8
      }
    },
    {
      field: 'facOutStartDate',
      label: t('生产日期'),
      component: 'DatePicker',
      colProps: {
        span: 8
      }
    },
    {
      field: 'facOutAge',
      label: t('使用年限(年)'),
      component: 'Input',
      colProps: {
        span: 8
      }
    },
    {
      field: 'facOutEndDate',
      label: t('到期时间'),
      component: 'DatePicker',
      colProps: {
        span: 8
      }
    },
    {
      field: 'field1',
      label: '关联属性',
      component: 'Divider',
      componentProps: {
        contentPosition: 'center'
      }
    },
    {
      field: 'pipeUuid',
      label: t('所属管网'),
      component: 'TreeSelect',
      componentProps: {
        renderAfterExpand: false,
        checkStrictly: true,
        checkOnClickNode: true,
        nodeKey: 'uuid',
        props: {
          label: 'pnName'
        }
      },
      optionApi: async () => {
        const res = await PipnentInfoApi.GetpnLedgerList({})
        return res.rows
      },
      colProps: {
        span: 8
      }
    },
    {
      field: 'surveyLocUuid',
      label: t('所属测绘节点'),
      component: 'Input',
      colProps: {
        span: 8
      }
    },
    {
      field: 'field1',
      label: '自定义属性',
      component: 'Divider',
      componentProps: {
        contentPosition: 'center'
      }
    }
  ])
  return { Formschema }
}
